<template>
	<view class="page-home">
		<z-paging ref="paging" @query="loadData" v-model="modules" refresher-vibrate :loading-more-enabled="false">
			<template #top>
				<uni-nav-bar :border="false" rightWidth="0" leftWidth="0" statusBar class="head-search">
					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<input v-model="searchKeyword" confirm-type="search" placeholderStyle="font-size:14px"
							class="nav-bar-input" type="text" :placeholder="$t('common.keyword_input')"
							@confirm="e => {proxy.$util.navigateTo('/pages/category/list/list', {keyword: e.detail.value})}" />
					</view>
				</uni-nav-bar>
			</template>
			<view class="modules-wrap">
				<view v-for="(module, index) of modules" :key="index">
					<view v-if="module.code == 'slideshow'" class="module-swiper mb-1">
						<swiper :indicator-dots="true" circular="true" :autoplay="true"
							:style="{ height: module.height + 'px' }" class="swiper">
							<swiper-item v-for="(image, i) in module.content.images" :key="i" class="swiper-item">
								<image lazy-load @load="e => { bannerImageLoad(e, index, i)}" :src="image.image"
									mode="widthFix" class="slide-image"
									@click="proxy.$util.linkTypeFormat(image.link)" />
							</swiper-item>
						</swiper>
					</view>

					<view v-if="module.code == 'icons' && module.content.images.length"
						:class="['quick-icon-wrapper', 'quick-icon-' + module.content.images.length]">
						<view v-for="(item, i) in module.content.images" :key="i" class="link-item">
							<image :src="item.image" class="image" mode="widthFix"
								@click="proxy.$util.linkTypeFormat(item.link)" />
							<text>{{ item.text }}</text>
						</view>
					</view>

					<view v-if="module.code == 'image100'" class="module-image mb-2">
						<image lazy-load :src="module.content.images[0].image" mode="widthFix" class="module-image"
							@click="proxy.$util.linkTypeFormat(module.content.images[0].link)" />
					</view>

					<view
						v-if="(module.code == 'product' || module.code == 'latest' || module.code == 'category') && module.content.products.length"
						class="module-product mb-2">
						<view class="module-title mt-1" v-if="module.content.title">{{ module.content.title }}</view>
						<view class="product-grid-wrap">
							<product-item class="product-grid" v-for="(product, p_idx) in module.content.products"
								:key="p_idx" :product="product"></product-item>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import productItem from "@/components/product"
	const {
		proxy
	} = getCurrentInstance()
	proxy.$util.setTabBarLanguage()

	const modules = ref([])
	const paging = ref(null)
	const searchKeyword = ref('')

	onShow(() => {
		proxy.$util.updateCartTabBar()
		searchKeyword.value = ''
		if (paging.value) {
			loadData()
		}
	})

	const bannerImageLoad = (e, index, i) => {
		if (i === 0) {
			const windowWidth = uni.getSystemInfoSync().windowWidth
			const bannerRatio = e.detail.width / e.detail.height
			modules.value[index].height = windowWidth / bannerRatio
		}
	}

	const loadData = () => {
		proxy.$http.get('home', null, {
			hload: !modules.value.length
		}).then(res => {
			paging.value.complete(res.data);
		})
	}

	// #ifdef APP
	if (uni.getSystemInfoSync().platform == 'ios') {
		var CALLBACK = function(res) {
			if (res.isConnected) {
				if (!uni.getStorageSync("firstTime")) {
					uni.$once('loadSettings', () => {
						loadData()
						uni.setStorageSync("firstTime", 1);
					})
				}
			}
		}
		uni.offNetworkStatusChange(CALLBACK)
		uni.onNetworkStatusChange(CALLBACK)
	}
	// #endif
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>